<template>
	<view class="content">
		<!-- 批次详情 -->
		<view class="statistics_msg_box">
			<view class="statistics_bcode_box">
				<view class="">
					批次号：
				</view>
				<view class="statistics_bcode_count">{{detail_data.bcode}}</view>
			</view>
			<view class="fenge"></view>
			<view class="statistics_order_box">
				<view class="statistics_order_total_box">
					<view>运单数：</view>
					<view class="green">{{detail_data.order_count}}单</view>
				</view>
				<view class="statistics_order_total_box">
					<view>已打印：</view>
					<view class="green">{{detail_data.print_order_count}}单</view>
				</view>
			</view>
			<view class="statistics_order_box">
				<view class="fenge_"></view>
				<view class="fenge_"></view>
			</view>
			<view v-if="detail_data.state !== 'wait_print'" class="statistics_bcode_box">
				<view class="">
					状态：
				</view>
				<view class="yellow">{{detail_data.state_text}}</view>
			</view>
			<view v-if="detail_data.state !== 'wait_print'" class="fenge"></view>
			<view class="statistics_bcode_box">
				<view class="">
					创建时间：
				</view>
				<view class="">{{detail_data.created_at}}</view>
			</view>
		</view>
		<!-- 查找 -->
		<form @submit="search" @reset="reset">
			<view class="search_box">
				<view class="search_box_search" v-show="search_show">
					<view class="input_box">
						<img src="../../static/image/minejijian_icon_sousuo@2x.png" alt="">
						<input type="text" name="search_input" v-model="search_input" placeholder="请输入姓名/电话/运单号" placeholder-style="color: #999999">
					</view>
					<button class="search_btn" form-type="submit">查找</button>
				</view>
				<view>
				<!-- 搜索结果 -->
					<view class="search_result" v-show="!search_show">
						<text class="search_result_text">{{search_input}}</text>
						<button form-type="reset" class="delete_search_btn">
							<img src="../../static/image/minejijian_icon_shanchu@2x.png" alt="">
						</button>
					</view>
				</view>
			</view>
		</form>
		<!-- 运单列表 -->
		<!-- 待打印列表 -->
		<view class="wait_print_list_box" style="padding-bottom: 216rpx;">
			<view v-for="(item,index) in detail_list" class="order_box">
				<view class="express_code">
					运单号：{{item.express_code}}
				</view>
				<view class="receiver_base_msg_box">
					<img src="../../static/image/list_icon_shoujian@2x.png" alt="">
					<text class="receiver_name">{{item.receiver_name}}</text>
					<text class="receiver_phone">{{item.receiver_phone}}</text>
				</view>
				<view class="receiver_address">
					{{item.receiver_province_text + item.receiver_city_text + item.receiver_district_text + item.receiver_address}}
				</view>
				<view class="fenge"></view>
				<view class="receiver_remark" v-if="item.receiver_remark != ''">
					<view>备注：</view>
					<view>{{item.receiver_remark}}</view>
				</view>
				<view class="fenge" v-if="item.receiver_remark != ''"></view>
				<view class="agent_fee" v-if="item.agent_fee != '0.00'">
					<view>代收货款：</view>
					<view class="agent_fee_text">{{item.agent_fee_text}}</view>
				</view>
				<view class="fenge" v-if="item.agent_fee != '0.00'"></view>
				<view class="receiver_created_at">
					<view>创建时间：</view>
					<view>{{item.created_at}}</view>
				</view>
				<view class="fenge"></view>
				<view class="btn_box" v-if="item.state === 'wait_print'">
					<view class="receiver_state">{{item.state_text}}</view>
					<view class="cancel_print_btn" @click="delete_order(item.uuid)">取消打印</view>
				</view>
				<view class="wait_collect_bottom_box" v-if="item.state !== 'wait_print'">
					<view class="yellow" v-if="item.state === 'wait_collect'">{{item.state_text}}</view>
					<view class="green" v-if="item.state !== 'wait_collect'">{{item.state_text}}</view>
					<view class="wait_collect_btn_box" v-if="item.state === 'wait_collect'">
						<view class="cancle_sender_btn" @click="cancel_send(item.uuid)">取消发货并移除</view>
						<view class="print_again_btn" @click="again_print(item.uuid)">重新打印</view>
					</view>
				</view>
			</view>
			<view class="print_btn" v-if="(detail_data.state === 'wait_print') && (search_show == true)" @click="go_print">一键批量打印</view>
			<view class="print_btn" v-if="(detail_data.state === 'wait_collect') && (search_show == true)" @click="go_print">一键批量重新打印</view>
		</view>
	</view>
</template>

<script>
	var page = 1, timer = null;
	export default {
		data() {
			return {
				token: '',
				// 批次uuid
				uuid: '',
				state: '',
				detail_data: {},
				// 已打印加载
				loadingText: '加载中...',
				// 批次详情列表
				detail_list: [],
				// 已打印搜索框值
				search_input: '', 
				// 删除订单uuid
				delete_uuid: '',
				search_show: true,
			}
		},
		onLoad(options) {
			console.log(options)
			this.uuid = options.uuid
			// 获取token
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					// 获取批次详情首页数据
					this.getBatchDetail()
				}
			})
			
		},
		onReachBottom (){
			console.log(1)
			if(timer != null){
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				//加载更多数据
				this.getDetailMore();
			}, 500);
		},
		methods:{
			again_print (uuid){
				uni.navigateTo({
					url: `../print/print?uuid=${uuid}`
				})
			},
			// 清空搜索 点击关闭
			reset () {
				this.search_input = ''
				this.search_show = true
				this.getBatchDetail()
			},
			// 去打印
			go_print () {
				uni.redirectTo({
					url: `../print/print?batch_uuid=${this.uuid}`
				})
			},
			// 取消发货并移除
			cancel_send (uuid) {
				uni.showModal({
					title:'提示',
					content: '是否确定取消发货？\n(取消后数据不可恢复)',
					success: res => {
						if (res.confirm) {
							this.$https.delete(`api/mini_customer/v1/orders/delete?token=${this.token}&uuid=${uuid}`)
							.then(res => {
								this.getBatchDetail()
							})
						}
					}
				})
			},
			// 删除待发货订单
			delete_order (uuid) {
				uni.showModal({
				    title: '提示',
				    content: '是否确定取消打印此运单？\n(取消后运单数据不可恢复)',
				    success: res => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							this.$https.delete(`api/mini_customer/v1/orders/delete?token=${this.token}&uuid=${uuid}`)
							.then(res => {
								this.getBatchDetail()
							})
				        } 
				    }
				});
			},
			// 搜索
			search (e) {
				if ((e.detail.value.search_input == '') || (e.detail.value.search_input == ' ')){
					return false
				}
				this.search_show = false;
				this.search_input = e.detail.value.search_input
				this.getBatchDetail()
			},
			// 详情列表上拉刷新 
			getDetailMore(){
				if(this.loadingText === "加载中..."){
					return false;
				}
			    this.loadingText = '加载中...';
			    //在当前页面显示导航条加载动画。
			    uni.showNavigationBarLoading();
				this.$https.get(`api/mini_customer/v1/order_batches/order_batch_detail?token=${this.token}&limit=20&page=${page}&key=${this.search_input}&uuid=${this.uuid}`)
				.then(res => {
					if(res.data.results.length < 1){
						 //在当前页面隐藏导航条加载动画。
						uni.hideNavigationBarLoading();
						this.loadingText = '已加载全部';
						return false;
					}
					page++;
					console.log(res);
					this.detail_list = this.detail_list.concat(res.data.results);
					this.loadingText = '';
					uni.hideNavigationBarLoading();
				})
			},
			// 获取第一页数据
			getBatchDetail(){
			    page = 1;
			    uni.showNavigationBarLoading();
				this.$https.get(`api/mini_customer/v1/order_batches/order_batch_detail?token=${this.token}&limit=20&page=${page}&key=${this.search_input}&uuid=${this.uuid}`)
				.then(res => {
					this.state = res.data.batch_detail.state
					this.detail_data = res.data.batch_detail
					page++;
					this.detail_list = res.data.results;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					this.loadingText = '';
				})
			}
		},
	}
</script>

<style>
	button::after { border: none }
	.content {
		/* height: 100%; */
		width: 100%;
		overflow-x: hidden;
	}
	.statistics_msg_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
		padding-top: 28rpx;
	}
	.statistics_bcode_box{
		display: flex;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
		color: #666666;
		justify-content: space-between;
	}
	.statistics_bcode_box:nth-last-of-type(1){
		padding-bottom: 24rpx;
	}
	.statistics_bcode_count{
		color: #13A684;
	}
	.fenge{
		width: calc(100% - 48rpx);
		height: 2rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
	}
	.fenge_{
		width: 302rpx;
		height: 2rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
		margin-top: 24rpx;
	}
	.statistics_order_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		font-size: 28rpx;
	}
	.statistics_order_total_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		width: 302rpx;
	}
	.green{
		color: #13A684;
	}
	.yellow{
		color: #FFB63A;
	}
	/* 搜索 */
	.search_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
		height: 128rpx;
	}
	.input_box{
		display: flex;
		background: #eeeeee;
		border-radius: 12rpx;
		width: 500rpx;
		height: 80rpx;
		align-items: center;
	}
	.input_box img{
		width: 32rpx;
		height: 32rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	.search_result img{
		height: 20rpx;
		width: 20rpx;
	}
	.search_result{
		display: inline-block;
		align-items: center;
		background: #D1E0DA;
		border-radius: 12rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		height: 80rpx;
		justify-content: space-between;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}
	.search_result_text{
		float: left;
		line-height: 80rpx;
		margin-right: 24rpx;
		color: #13A684;
		font-size: 28rpx;
	}
	.search_box_search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		height: 100%;
	}
	.search_btn{
		width: 130rpx;
		height: 80rpx;
		background-color: #13A684;
		color: #ffffff;
		border-radius: 12rpx;
		font-size: 32rpx;
		border: none
	}
	.delete_search_btn{
		width: 20rpx;
		height: 20rpx;
		padding: 0;
		background: url(../../static/image/minejijian_icon_shanchu@2x.png);
		background-size:20rpx 20rpx;
		margin-top: 30rpx;
		margin-left: 24rpx;
	}
	/* 运单盒子 */
	.order_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
	}
	.express_code{
		padding-top: 34rpx;
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #999999;
	}
	.receiver_base_msg_box{
		display: flex;
		margin-top: 34rpx;
		margin-left: 24rpx;
		align-items: center;
	}
	.receiver_base_msg_box img{
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
	}
	.receiver_name{
		font-size: 32rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.receiver_phone{
		font-size: 32rpx;
		color: #3A9BFF;
		margin-left: 24rpx;
		line-height: 60rpx;
	}
	.receiver_address{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #666666;
		padding-bottom: 12rpx;
	}
	.fenge{
		width: calc(100% - 48rpx);
		height: 2rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		background-color: #eeeeee;
	}
	.receiver_remark,.agent_fee,.receiver_created_at{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
	}
	.agent_fee_text{
		color: #13A684;
	}
	.btn_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		padding-bottom: 24rpx;
	}
	.receiver_state{
		font-size: 28rpx;
		color: #FFB63A;
	}
	.cancel_print_btn{
		font-size: 28rpx;
		color: #FF5F5F;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		border-radius: 12rpx;
		border:2rpx solid #FF5F5F;
	}
	.yellow{
		color: #FFB63A;
		font-size: 28rpx;
	}
	.green{
		color: #13A684;
		font-size: 28rpx;
	}
	.wait_collect_bottom_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		padding-bottom: 24rpx;
	}
	.wait_collect_btn_box{
		display: flex;
		align-items: center;
	}
	.cancle_sender_btn{
		font-size: 28rpx;
		color: #FF5F5F;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 220rpx;
		border-radius: 12rpx;
		border:2rpx solid #FF5F5F;
	}
	.print_again_btn{
		font-size: 28rpx;
		color: #13A684;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		border-radius: 12rpx;
		border:2rpx solid #13A684;
		margin-left: 24rpx;
	}
	.print_btn{
		position: fixed;
		bottom: 48rpx;
		width: calc(100% - 48rpx);
		height: 120rpx;
		left: 24rpx;
		background: #13A684;
		color: #ffffff;
		text-align: center;
		border-radius: 12rpx;
		line-height: 120rpx;
		font-size: 32rpx;
	}
</style>
